/* eslint react/no-string-refs:0 */
import React, { Component } from "react";
import { Input, Button, Checkbox, Grid, Feedback } from "@icedesign/base";
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError
} from "@icedesign/form-binder";
import IceIcon from "@icedesign/icon";
import "./Register.scss";
import { HashRouter as Router } from "react-router-dom";

const { Row, Col } = Grid;
const Toast = Feedback.toast;
export default class Register extends Component {
  static displayName = "Register";

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        username: "",
        email: "",
        passwd: "",
        rePasswd: ""
      }
    };
  }

  checkPasswd = (rule, values, callback) => {
    if (!values) {
      callback("请输入正确的密码");
    } else if (values.length < 8) {
      callback("密码必须大于8位");
    } else if (values.length > 16) {
      callback("密码必须小于16位");
    } else {
      callback();
    }
  };

  checkPasswd2 = (rule, values, callback, stateValues) => {
    if (!values) {
      callback("请输入正确的密码");
    } else if (values && values !== stateValues.passwd) {
      callback("两次输入密码不一致");
    } else {
      callback();
    }
  };

  formChange = value => {
    this.setState({
      value
    });
  };

  handleSubmit = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log("errors", errors);
        return;
      }
      // console.log("values:", values);
      // Feedback.toast.success("注册成功");
      Toast.show({
        type: "prompt",
        size: "large",
        style: {
          background: "rgb(48, 128, 254)"
        },
        content: `暂不支持注册，若有疑问请联系开发人员 ！`
      });
      // HashRouter.push('/');
      // location.replace("/");
      // 注册成功后做对应的逻辑处理
    });
  };

  render() {
    return (
      <div style={styles.container} className="user-register">
        <div style={styles.header}>
          <p style={styles.desc}>恒逸e家食堂</p>
        </div>
        <div style={styles.formContainer}>
          <IceFormBinderWrapper
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formItems}>
              <Row style={styles.formItem}>
                <Col style={styles.formItemCol}>
                  <IceIcon
                    type="person"
                    size="small"
                    style={styles.inputIcon}
                  />
                  <IceFormBinder
                    name="username"
                    required
                    message="请输入正确的用户名"
                  >
                    <Input size="large" placeholder="用户名" />
                  </IceFormBinder>
                </Col>
                <Col>
                  <IceFormError name="username" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col style={styles.formItemCol}>
                  <IceIcon type="mail" size="small" style={styles.inputIcon} />
                  <IceFormBinder
                    type="email"
                    name="email"
                    required
                    message="请输入正确的邮箱"
                  >
                    <Input size="large" maxLength={20} placeholder="邮箱" />
                  </IceFormBinder>
                </Col>
                <Col>
                  <IceFormError name="email" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col style={styles.formItemCol}>
                  <IceIcon type="lock" size="small" style={styles.inputIcon} />
                  <IceFormBinder
                    name="passwd"
                    required
                    validator={this.checkPasswd}
                  >
                    <Input
                      htmlType="password"
                      size="large"
                      placeholder="至少8位密码"
                    />
                  </IceFormBinder>
                </Col>
                <Col>
                  <IceFormError name="passwd" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col style={styles.formItemCol}>
                  <IceIcon type="lock" size="small" style={styles.inputIcon} />
                  <IceFormBinder
                    name="rePasswd"
                    required
                    validator={(rule, values, callback) =>
                      this.checkPasswd2(
                        rule,
                        values,
                        callback,
                        this.state.value
                      )
                    }
                  >
                    <Input
                      htmlType="password"
                      size="large"
                      placeholder="确认密码"
                    />
                  </IceFormBinder>
                </Col>
                <Col>
                  <IceFormError name="rePasswd" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Button
                  type="primary"
                  onClick={this.handleSubmit}
                  style={styles.submitBtn}
                >
                  注 册
                </Button>
              </Row>

              <Row style={styles.tips}>
                <a href="/#/login" style={styles.link}>
                  使用已有账户登录
                </a>
              </Row>
            </div>
          </IceFormBinderWrapper>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    position: "relative",
    width: "100%",
    height: "100vh",
    paddingTop: "100px",
    background: "#f0f2f5",
    backgroundImage:
      "url(https://images.unsplash.com/photo-1531060280746-79452e9ec2a1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=53e1385897e910c5d5c7255817d2282e&auto=format&fit=crop&w=1504&q=80)"
  },
  header: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: "40px"
  },
  meta: {
    display: "flex",
    alignItems: "center",
    textDecoration: "none"
  },
  title: {
    textAlign: "center",
    fontSize: "33px",
    color: "rgba(0, 0, 0, 0.85)",
    fontFamily: "Myriad Pro, Helvetica Neue, Arial, Helvetica, sans-serif",
    fontWeight: "600"
  },
  desc: {
    margin: "10px 0",
    fontSize: "24px",
    fontFamily: "宋体",
    fontWeight: "600",
    color: "#fff"
  },
  logo: {
    marginRight: "10px",
    width: "48px"
  },
  formContainer: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "column",
    maxWidth: "368px",
    margin: "0 auto"
  },
  formItem: {
    position: "relative",
    marginBottom: "25px",
    flexDirection: "column",
    padding: "0"
  },
  formItemCol: {
    position: "relative",
    padding: "0"
  },
  formTitle: {
    textAlign: "center",
    margin: "0 0 20px",
    color: "rgba(0, 0, 0, 0.85)",
    fontWeight: "bold"
  },
  inputIcon: {
    position: "absolute",
    left: "12px",
    top: "50%",
    transform: "translateY(-50%)",
    color: "#999"
  },
  submitBtn: {
    fontSize: "16px",
    height: "40px",
    lineHeight: "40px",
    background: "#3080fe",
    borderRadius: "4px"
  },
  checkbox: {
    marginLeft: "5px"
  },
  tips: {
    justifyContent: "center"
  },
  link: {
    color: "#999",
    textDecoration: "none",
    fontSize: "13px"
  },
  line: {
    color: "#dcd6d6",
    margin: "0 8px"
  }
};
